<template>
    <div class="flex flex-col h-full">
        <div class="flex items-center justify-between mb-2.5">
            <div>
                <el-tooltip
                    v-if="value.share_status === 0"
                    effect="dark"
                    placement="top"
                    content="审核中: 审核通过后方可在广场中展示~">
                    <el-tag type="warning">分享审核中</el-tag>
                </el-tooltip>

                <el-tooltip
                    v-if="value.share_status === 2"
                    effect="dark"
                    placement="top"
                    :content="'分享被拒绝: '+value.share_result">
                    <el-tag type="danger">分享被拒绝</el-tag>
                </el-tooltip>
            </div>

            <div class="flex items-center gap-0.5">
                <el-tooltip effect="dark" content="复制提示词" placement="top">
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconCopy"
                            alt="复制提示词"
                            @click="onCopy(value.prompt)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip effect="dark" content="下载视频" placement="top">
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconDownload"
                            alt="下载视频"
                            @click="handleDownload(value.video_url, value.prompt)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip
                    effect="dark"
                    content="重新生成"
                    placement="top"
                >
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconReload"
                            alt="重新生成"
                            @click="handleReset(value)"
                        />
                    </div>
                </el-tooltip>

                <el-tooltip
                    effect="dark"
                    placement="top"
                    :content="value.share_status === -1
                        ? '分享至广场'
                        : (value.share_status === -2 ? '取消分享 (该分享被隐藏)' : '取消分享')"
                >
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            v-if="value.share_status === -1"
                            class="w-4 h-4 object-contain"
                            :src="IconShare"
                            alt="分享至广场"
                            @click="handleSquare(value.code, value.share_status)"
                        />
                        <img
                            v-else
                            class="w-4 h-4 object-contain"
                            :src="IconLink"
                            alt="取消分享"
                            @click="handleSquare(value.code, value.share_status)"
                        />
                    </div>
                </el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="top">
                    <div class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-md p-[6px] box-content">
                        <img
                            class="w-4 h-4 object-contain"
                            :src="IconDelete"
                            alt="删除"
                            @click="handleDelete(value.code)"
                        />
                    </div>
                </el-tooltip>
            </div>
        </div>

        <div class="rounded-xl cursor-pointer overflow-hidden">
            <aspect-ratio
                :src="value.video_url"
                :ratio="[4, 3]"
                type="video"
            />
        </div>

        <el-popover
            placement="bottom"
            title="提示词"
            trigger="hover"
            :width="300"
            :content="value.prompt"
        >
            <template #reference>
                <div class="w-full box-border">
                    <p class="text-tx-regular leading-tight line-clamp-2 h-[35px] mt-2">
                        {{ value.prompt }}
                    </p>
                </div>
            </template>
        </el-popover>

        <div class="mt-3">
            <div class="flex items-center justify-between">
                <div class="text-sm text-tx-placeholder">
                    {{ value.create_time }}
                </div>
                <div>
                    <el-tag v-if="value.type === 'text2video'">文生视频</el-tag>
                    <el-tag v-if="value.type === 'img2video'">图生视频</el-tag>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useClipboard } from '@vueuse/core'
import { queryLists, resetFormData } from '../hooks/useVideoEffect'
import videoApi from '~/api/apply/video'
import downloadUtil from '~/utils/download'
import IconCopy from '~/assets/image/draw/icon_copy.png'
import IconLink from '~/assets/image/draw/icon_link.png'
import IconShare from '~/assets/image/draw/icon_share.png'
import IconReload from '~/assets/image/draw/icon_reload.png'
import IconDelete from '~/assets/image/draw/icon_delete.png'
import IconDownload from '~/assets/image/draw/icon_download.png'

withDefaults(
    defineProps<{
        value?: VideoRecordResponse;
    }>(),
    {
        value: {} as VideoRecordResponse | any
    }
)

const { copy } = useClipboard()

/**
 * 复制文字
 *
 * @param {string} content
 * @author zero
 */
const onCopy = async (content: string) => {
    await copy(content)
    feedback.msgSuccess('复制成功')
}

/**
 * 下载视频
 *
 * @param {string} url
 * @param {string} name
 * @author zero
 */
const handleDownload = async (url: string, name: string) => {
    try {
        const res = await $request.get(
            { url, responseType: 'blob', baseURL: '' },
            { isReturnDefaultResponse: true, apiPrefix: '' }
        )

        const blob = new Blob([res._data], {
            type: res.headers.get('Content-Type')
        })
        const link = window.URL.createObjectURL(blob)
        downloadUtil.file(link, name || 'video')
    } catch (error) {
        feedback.msgError('视频下载失败: ' + error)
    }
}

/**
 * 重新生成
 *
 * @param record
 * @author zero
 */
const handleReset = async (record: VideoRecordResponse) => {
    const params = {
        engine: record.engine,
        prompt: record.prompt,
        scale: record.scale,
        image_url: record.image_url
    }

    await resetFormData(params)
}

/**
 * 删除记录
 *
 * @param {string} code
 * @author zero
 */
const handleDelete = async (code: string) => {
    await feedback.confirm('确认要删除吗？')
        .then(async () => {
            await videoApi.delete(code)
            await queryLists()
            feedback.msgSuccess('删除成功')
        }).catch(() => {})
}

/**
 * 广场公开
 *
 * @param {string} code
 * @param {number} share_status
 * @author zero
 */
const handleSquare = async (code: string, share_status: number) => {
    if (share_status !== -1) {
        feedback.confirm('您确定要取消广场分享吗?')
            .then(async () => {
                await videoApi.square(code)
                await queryLists()
                feedback.msgSuccess('取消成功')
            }).catch(() => {})
    } else {
        feedback.confirm('您确定要公开至广场吗?')
            .then(async () => {
                await videoApi.square(code)
                await queryLists()
                feedback.msgSuccess('公开成功')
            }).catch(() => {})
    }
}
</script>
